<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>MVC DOH Toolbar Widget Test</title>
		<style>
			@import "../../../../dijit/themes/claro/document.css";
			@import "../../../../dijit/tests/css/dijitTests.css";
	
			.flatScreen {
				background-image: url(../../../../dijit/tests/images/flatScreen.gif); height: 32px; width: 32px;		
		</style>
		<link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/>
		<script type="text/javascript" data-dojo-config="parseOnLoad:0,isDebug:1,async:1,mvc:{debugBindings:1}" src="../../../../dojo/dojo.js"></script>
	
		<script type="text/javascript">
			negativeConverter = {
				format: function(value){ return !value; },
				parse: function(value){ return !value; }
			};
	
			require([
				"doh/runner",
				"dojo/parser",
				"dojo/when",
				"dojo/Stateful",
				"dojox/mvc/ModelRefController",
				"dojox/mvc/_patches",
				"dijit/Declaration",
				"dijit/Toolbar",
				"dijit/ToolbarSeparator",
				"dijit/form/Button",
				"dijit/form/DropDownButton",
				"dijit/form/ComboButton",
				"dijit/form/ToggleButton",
				"dijit/ColorPalette",
				"dijit/TooltipDialog",
				"dijit/form/TextBox",
				"dijit/Menu",
				"dijit/MenuItem",
				"dijit/form/TextBox",
				"dijit/form/Select",
				"dijit/form/CheckBox",
				"dojo/domReady!"
			], function(doh, parser, when, Stateful, ModelRefController){
	
				cutItemCtrl = new ModelRefController();
				copyItemCtrl = new ModelRefController();
				boldItemCtrl = new ModelRefController();

				when(parser.parse(), function(){
					cutItemCtrl.set("model", new Stateful({iconClass: "dijitEditorIcon dijitEditorIconCut"}));
					copyItemCtrl.set("model", new Stateful({iconClass: "dijitEditorIcon dijitEditorIconCopy", label: "Copy"}));
					boldItemCtrl.set("model", new Stateful({checked: false}));
		
					// should be able to verify all of the inputs 
					doh.register("check initial values and bindings", [{
						name : "initial",
						runTest : function() {
							doh.is("Copy", dijit.byId("selCopy").get('value'),"value should be Copy");
							doh.is("Copy",  dijit.byId("toolbar1.copy").get('label'),"label should be Copy");
							doh.t(dijit.byId("toolbar1.copy").get('showLabel'),"label should be shown");

							doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
							doh.f(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be false");

							doh.t(dijit.byId("checkItalic").get('checked'),"italic checkbox should be true");
							doh.f(dijit.byId("toolbar1.italic").get('checked'),"italic toolbar should be false");
						}
					}]);

					doh.register("update Copy Label", [{
						name : "Update-First-Name",
						runTest : function() {
							var copyLabel, boldToolbar, bold, italic;
							//test first relevant false
							copyLabel = dijit.byId("selCopy");
							if (copyLabel) {
								copyItemCtrl.set("label","Copy to clipboard...");
								doh.is("Copy to clipboard...", dijit.byId("selCopy").get('value'),"value should be Copy to clipboard...");
								doh.is("Copy to clipboard...",  dijit.byId("toolbar1.copy").get('label'),"label should be Copy to clipboard...");
							}
							boldToolbar = dijit.byId("boldtoolbar1.copy");
							if (boldToolbar) {
								boldToolbar.set("checked", true);
								doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
								doh.t(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be true");
							}
							bold = dijit.byId("checkBold");
							if (bold) {
								bold.set("checked",false);
								doh.f(dijit.byId("checkBold").get('checked'),"bold checkbox should be false");
								doh.f(dijit.byId("toolbar1.bold").get('checked'),"bold toolbar should be false");
							}
							italic = dijit.byId("checkItalic");
							if (italic) {
								italic.set("checked",true);
								doh.t(dijit.byId("checkItalic").get('checked'),"italic checkbox should be false");
								doh.f(dijit.byId("toolbar1.italic").get('checked'),"italic toolbar should be false");
							}
						}
					}]);

					doh.run();
				});
			}); 
		</script>
	</head>

	<body class="claro">
	<script type="dojo/require">at: "dojox/mvc/at"</script>
	<h1 class="testTitle">Toolbar test</h1>

	<span data-dojo-type="dijit.Declaration" data-dojo-props='widgetClass:"ToolbarSectionStart", defaults:{ label: "Label"}'>
		<span data-dojo-type="dijit.ToolbarSeparator"></span><i>${label}:</i>
	</span>

	<h2>Toolbar from markup</h2>

	<div id="toolbar1" data-dojo-type="dijit.Toolbar"
			><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Buttons"'></div
			><div id="toolbar1.cut" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:false, iconClass: at(cutItemCtrl, "iconClass")'>Cut</div
			><div id="toolbar1.copy" data-dojo-type="dijit.form.Button" data-dojo-props='showLabel:true, "*": at(copyItemCtrl, "*")'>Copy</div

			><div data-dojo-type="ToolbarSectionStart" data-dojo-props='label:"Toggles"'></div
			><div id="toolbar1.bold" data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconBold", showLabel:false, checked: at(boldItemCtrl, "checked")'>Bold</div
			><div id="toolbar1.italic" data-dojo-type="dijit.form.ToggleButton" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconItalic", showLabel: true'>Italic</div

></div>

	<div style="margin-top:8px;">
		Icon for "Cut":
		<select data-dojo-type="dijit.form.Select" data-dojo-props="value: at(cutItemCtrl, 'iconClass')">
			<option value="dijitEditorIcon dijitEditorIconCut">Cut</option>
			<option value="dijitFolderClosed">Folder</option>
			<option value="noteIcon">Note</option>
			<option value="flatScreen">Flat Screen</option>
		</select>
	</div>

	<div style="margin-top:8px;">
		Icon for "Copy":
		<select data-dojo-type="dijit.form.Select" data-dojo-props="value: at(copyItemCtrl, 'iconClass')">
			<option value="dijitEditorIcon dijitEditorIconCopy">Copy</option>
			<option value="dijitFolderClosed">Folder</option>
			<option value="noteIcon">Note</option>
			<option value="flatScreen">Flat Screen</option>
		</select>
	</div>

	<div style="margin-top:8px;">
		Label for "Copy":
		<select id="selCopy" data-dojo-type="dijit.form.Select" data-dojo-props="value: at(copyItemCtrl, 'label')">
			<option value="Copy">Copy</option>
			<option value="Copy to clipboard...">Copy to clipboard...</option>
		</select>
	</div>

	<div style="margin-top:8px;">
		Change the state for "Bold" (but this check box is free from change in the tool bar):
		<input id="checkBold" data-dojo-type="dijit.form.CheckBox" checked data-dojo-props="checked: at(boldItemCtrl, 'checked').direction(at.to)">
	</div>

	<div style="margin-top:8px;">
		"Italic" should be unselected (directly bound to the tool bar item widget):
		<input id="checkItalic" data-dojo-type="dijit.form.CheckBox" checked data-dojo-props="checked: at(dijit.byId('toolbar1.italic'), 'checked').transform(negativeConverter)">
	</div>
  </body>

</html>
